<template>
  <el-row>
    <el-col :span="8" style="padding-right: 10px;">
      <el-card class="box-card">
        <div class="user">
          <img class="user-image" src="../assets/images/curry.jpg" alt="">
          <div class="user-info">
            <p class="name">{{ userInfo.userName }}</p>
            <p>昵称：{{userInfo.nickName}}</p>
            <p>手机：{{userInfo.phone}}</p>
            <p>地址：{{userInfo.address}}</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>
            上次登录时间
            <span>2023-12-29</span>
          </p>
          <p>
            上次登录地点
            <span>深圳</span>
          </p>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import requestUtil from '../network/request'
import Cookie from "js-cookie";
export default {
  data() {
    return {
      userInfo: {
        userId: '',
        userName: '',
        age: 0,
        nickName: '',
        address: ''
      }
    }
  },
  methods: {
    getUserInfo() {
      requestUtil.post('/user/info/query', {
        userId: Cookie.get("userId")
      }).then(res => {
        this.userInfo = res.result
      })
    }
  },
  mounted() {
    this.getUserInfo()
  }
}
</script>

<style lang="less" scoped>
.user {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;

  img {
    margin-right: 40px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }

  .user-info {
    .name {
      font-size: 32px;
      margin-bottom: 10px;
    }

    .access {
      color: #999999;
    }

  }
}

.login-info {
  p {
    line-height: 28px;
    font-size: 14px;
    color: #999999;

    span {
      color: #666666;
      margin-left: 60px;
    }
  }
}
</style>